<template>
	<div class="mobile">
		<div class="nav-top">
			<div class="left">
				<router-link to="/portal/netm"><img src="../../../assets/img/phone-back.png" alt=""></router-link>
			</div>
			<div class="right">
				<span>代表风采</span>
				<img src="../../../assets/img/phone-more.png" alt="">
			</div>
		</div>
		<div class="tab-list">
			<div class="tab" v-for="item in StreetInfo" :class="{ 'active': item.checked }"
				@click="goStreetItem(item.id)">{{ item.streetName }}</div>
		</div>
		<div class="img-list">
			<div class="item" v-for="item in RepList">
				<div class="tips"><span></span>区人大代表</div>
				<img :src="item.address" alt="">
				<div class="name">{{ item.name }}</div>
				<div class="position">{{ item.job }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getRepList } from "@/api/website";
import { listStreetInfo } from "@/api/StreetInfo/StreetInfo";
export default {
	data() {
		return {
			StreetInfo: [],
			RepList: []
		}
	},
	components: {

	},
	created() {
		this.init();
	},
	mounted() {

	},
	methods: {
		init() {
			listStreetInfo('').then(response => {
				this.StreetInfo = response.rows;
				this.StreetInfo[0].checked = true;
				this.getPicList(this.StreetInfo[0].id)
			});

		},
		getPicList(id) {
			getRepList({ id: id }).then(response => {
				this.RepList = response
			});
		},
		goStreetItem(id) {
			for (const key in this.StreetInfo) {
				if (this.StreetInfo[key].id == id) {
					this.StreetInfo[key].checked = true;
				} else {
					this.StreetInfo[key].checked = false;
				}
			}
			this.getPicList(id)
		}
	}

};
</script>


<style scoped lang="scss"></style>
